<template>
  <div :style="{width:'100%',height:'100%'}" ref="homeEch"></div>
</template>

<script>
export default {
  name: "Age",
  data() {
    return {
      data: [
      ],
      agelist: [{}]
    };
  },
  created() {
    // this.echarts();
  },
  mounted() {  
    this.echarts();
    this.resizefun = () => {
      this.$echarts.init(this.$refs.homeEch).resize();
    };
    window.addEventListener("resize", this.resizefun);
  },
  //移除事件监听，避免内存泄漏
  beforeDestroy() {
    window.removeEventListener("resize", this.resizefun);
    this.resizefun = null;
  },
  methods: {
    // 年龄比例接口
    echarts() {
      let that = this;
      let myChart = this.$echarts.init(this.$refs.homeEch);
        var json = '{"data":{"title":"职务占比","subtitle":"行政人员","names":["管理员","业主单位","小队长","督察专员","维护专员","施工员","销售业务员","出纳","实物专管员","办公室（副）主任","销售部内勤员","办公室文职内勤员","财务部内勤员","技防部（副）经理","销售部（副）经理","财务部（副）经理"],"names1":["办公室","财务部","技防部","销售部"],"list":[{"name":"职务","value":[4,1,1,1,2,1,3,1,1,2,1,2,1,1,3,1]},{"name":"部门","value":[9,4,3,8]}]}}'
        var obj = JSON.parse(json)
        let data = obj.data
        let valuelist = data.list[0].value.map(
            function (item, index) {
                return {
                    name: data.names[index],
                    value: item,
                    itemStyle: {
                        color: that.$colors[index]
                    }
                }
            }
        )
        var option = {
            legend: {
                show: false,
                data: data.names
                , textStyle: {
                    color: '#fff'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            series: [
                {
                    name: '人数',
                    type: 'pie',
                    barWidth: '30',
                    data: valuelist,

                }
            ]
        };
        myChart.setOption(option);
    }

  }
};
</script>

<style>
</style>